<!-- leaflet地图 -->
<template>
  <div id="map" class="map" style="width:100%;height:100%;">
    <div class="mapChange">
      <el-select @change="changeMapServer" v-model="is_changed_map_service" placeholder="切换地图" style="width: 90%;">
        <el-option label="矢量地图" value="vec" />
        <el-option label="影像地图" value="img" />
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { initMap } from '@/utils/map';

const updateMapCenter = () => {
  if (window.map) {
    window.map.setView(window.map.getBounds().getCenter(), window.map.getZoom(), { animate: false });
  }
};

const onResizeObserver = new ResizeObserver(() => {
  updateMapCenter();
  window.map.invalidateSize()
});

const is_changed_map_service = ref('vec');

const imgLayer_url = 'http://192.168.88.177:8090/iserver/services/map-ugcv5-2000NianBaiYunQuYingXiangZW2V2014gz2000x2000NianBaiYunQuYingXiangZW2V2014gz2000x/rest/maps/2000年白云区影像_ZW2_V2014_gz2000x@2000年白云区影像_ZW2_V2014_gz2000x';
// eslint-disable-next-line no-undef
let mapLayerImage = L.supermap.tiledMapLayer(imgLayer_url)

const vec_url = 'http://192.168.88.177:8000/service?service=WMS&request=GetMap&layers=ditu_baiyun&styles=&format=image/png&transparent=true&version=1.1.1&width=256&height=256&srs=EPSG:0&bbox={bbox}';
// eslint-disable-next-line no-undef
// let mapLayerVec = L.supermap.tiledMapLayer(vec_url)
// eslint-disable-next-line no-undef
let mapLayerVec = L.tileLayer.wms('http://192.168.88.177:8000/service?', {
    layers: 'ditu_baiyun',
    format: 'image/png',
    transparent: true,
    attribution: '&copy; MapProxy'
});

const changeMapServer = () => {
  console.log(is_changed_map_service.value);
  if(is_changed_map_service.value === 'vec') {
    window.map.eachLayer( (layer) => {
      if(layer._url === imgLayer_url) {
        layer.remove();
      }
    })
    mapLayerVec.addTo(window.map);
  } else {
    window.map.eachLayer( (layer) => {
      if(layer._url === vec_url) {
        layer.remove();
      }
    })
    mapLayerImage.addTo(window.map);
  }
}

onMounted(() => {
  window.map = initMap('map');
  is_changed_map_service.value = 'vec';
  changeMapServer();
  onResizeObserver.observe(document.getElementById('map'));
})

onUnmounted(() => {
  onResizeObserver.disconnect();
})
</script>

<style scoped>
.mapChange {
  position: absolute;
  bottom: 10px;
  right: 20px;
  z-index: 999;
  width: 130px;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

</style>
